<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>



    <h1>兼容 ie </h1>
    <h1> 无缝轮播 </h1>


    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        ul,
        li {
            list-style: none;
            /* box-shadow:black 0px 0px 10px; */
        }

        img {
            vertical-align: top;
        }

        #box {
            width: 400px;
            height: 349px;
            margin: 100px auto;
            position: relative;
            /* overflow: hidden; */
        }

        #box ul {
            width: 2200px;
            position: absolute;
            left: 0;
            top: 0;
        }

        #box li {
            width: 200px;
            float: left;
            padding: 15px;
        }

        .li-content h3,
        .li-content p {
            padding-top: 12px;
        }

        button {
            border: none;
            padding: 12px;
            border: 1px solid black;
            margin-top: 5px;
            width: 100%;
        }

        li .li-inside {
            width: 100%;
        }

        #box li img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
    </style>
    <div id="box">
        <ul>
            <li class="">
                <div class="li-inside">
                    <img src="../img/Tesla (10).jpeg" alt="">
                    <div class="li-content">
                        <h3>Surface Pro 8</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. eligendi.</p>
                        <button>了解详情</button>
                    </div>
                </div>
            </li>


            


            <li class="">
                <div class="li-inside">
                    <img src="../img/Tesla (16).jpeg" alt="">
                    <div class="li-content">
                        <h3>Surface Pro 6</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. eligendi.</p>
                        <button>了解详情</button>
                    </div>
                </div>
            </li>

            <li class="">
                <div class="li-inside">
                    <img src="../img/Tesla (15).jpeg" alt="">
                    <div class="li-content">
                        <h3>Surface Pro 6</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. eligendi.</p>
                        <button>了解详情</button>
                    </div>
                </div>
            </li>


        </ul>
    </div>


    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">

        #box ul {
        width: 2000px; => 父容器设置足够宽的宽度, 为了能容下子元素横向排列
        position: absolute;
        background-color: lightgray;
        left: 0;
        top: 0;
        }

        #box li {
        float: left; => 子元素设置浮动, 这样就横向排列了
        width: 200px;
        height: 100px;
        }

        var box = document.getElementById("box");
        var ul = box.children[0];
        var num = 0;
        timer = setInterval(startttt, 10); => 每 10 毫秒向左移动移动 1 像素
        function startttt() {
        num--;
        num <= -600 ? num=0 : num; ul.style.left=num + "px" ; } #box { width: 200px; height: 100px; margin: 100px auto;
            background-color: pink; position: relative; /* overflow: hidden; */=> 最后 将外面的隐藏掉
            border: 5px solid red;
            }


    </xmp>>

    <script>

        function get_distance(obj) {
            let domToRight = obj.getBoundingClientRect().left // dom 的右边到视口左边的距离
            console.log(domToRight);         
        }

        window.onload = function () {
            var box = document.getElementById("box");
            var arrrrr = document.getElementsByTagName("li");
            console.log(arrrrr[arrrrr.length - 1]);




            console.log(arrrrr);
            var ul = box.children[0];
            var num = 0;
            timer = setInterval(startttt, 30);
            function startttt() {
                num--;
                num <= -400 ? num = 0 : num;
                get_distance(arrrrr[arrrrr.length - 1])
                ul.style.left = num + "px";
            }
        }

    </script>

</body>

</html>